<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>VueComponent</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--  
      关于 VueComponent：
        school 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的。
        我们只需要写 <school></school> 或 <school/> ，Vue 解析时会帮我们创建 school 组件的实例对象。
          即 Vue 帮我们执行的：new VueComponent(options)。
        特别注意：每次调用 Vue.extend ，返回的都是一个全新的 VueComponent。
        关于 this 的指向：
          组件配置中：data(),methods中的函数，watch中的函数，computed中的函数 它们的 this 均是VueComponent实例对象。
          new Vue() 配置中：data(),methods中的函数，watch中的函数，computed中的函数 它们的 this 均是Vue实例对象。
        VueComponent的实例对象，以后简称 vc (也可称为 组件实例对象)。
        Vue 的实例对象简称为 vm。
    -->
    <div id="root">
        <school></school>
        <hello></hello>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; 

    // 创建 school 组件
    const school = Vue.extend({ 
      template:`
        <div>
          <h2>学校名称: {{name}}</h2>
          <h2>学校地址: {{address}}</h2> 
        </div> `,
      data(){
        return {
          name: '南昌大学',
          address: '江西南昌'
        }
      }, 
    }) 

    console.log(school)

    // 创建 hello 组件
    const hello = {
      template:`<h1>{{msg}}</h1>`,
      data(){return {msg:'你好啊'}}
    }


    // 创建 vm
    new Vue({
      el: '#root',  
      components:{ school, hello }
    })
</script>
</html>